<script setup lang="ts">
import { RouterView } from "vue-router"
import { darkTheme, NConfigProvider, NMessageProvider } from 'naive-ui'
import type { GlobalThemeOverrides } from 'naive-ui'
import Message from "../src/components/message.vue"
const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: 'rgb(245,70,70)',
    primaryColorHover: '#ff5e5e',
    primaryColorPressed: 'red',
    primaryColorSuppl: '#ff5e5e'
  },
  Button: {
    textColorPrimary: '#fff',
    textColorHoverPrimary: '#fff',
    textColorPressedPrimary: '#fff',
    textColorSupplPrimary: '#fff',
    textColorFocusPrimary: '#fff',
  },
  Select: {
    peers: {
      InternalSelection: {
        textColor: 'rgb(245,70,70)'
      }
    }
  }
  // ...
}
</script>

<template>
  <n-config-provider :theme="darkTheme" :theme-overrides="themeOverrides">
    <RouterView></RouterView>
  </n-config-provider>
  <n-message-provider>
    <Message></Message>
  </n-message-provider>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
